<template>
  <div class="setup">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">设置</h1>
        </header>
        <div class="mui-content">
          <ul class="mui-table-view user-info-list">
            <li class="mui-table-view-cell mui-media">
              <router-link to="/personalData" class="mui-navigate-right">
                <img class="mui-media-object mui-pull-left" :src="getAvatar">
                <div class="mui-media-body">
                  {{getUserType}}
                  <p class='mui-ellipsis'>会员:{{userInfo.realname||userInfo.nickname||userInfo.username||'笑笑会员'}}</p>
                </div>
              </router-link>
            </li>
          </ul>
          <ul class="mui-table-view user-info-list not-first-list" v-if="isApp">
            <li class="mui-table-view-cell" v-tap="{method:getVersion}">
              <a class="mui-navigate-right info-list-item">
                <div class="mui-media-body">新版本检测</div>
                <div class="item-right">{{version|trVersion}}</div>
              </a>
            </li>
          </ul>






        </div>
      </div>
      <nav class="mui-bar mui-bar-tab exit" v-tap="{method:exit}">
        <div class="mui-tab-item">
          <span class="mui-tab-label">退出当前账户</span>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        avatarMan:'',
        avatarWoman:'',
        userInfo:{},
        isApp:false,
        version:'0.0',
      }
    },
    created(){
      var that = this;
      that.userInfo = that.$store.state.user.userInfo;
      that.avatarMan=that.$store.state.user.avatarMan;
      that.avatarWoman=that.$store.state.user.avatarWoman;
      mui.plusReady(function() {
        that.isApp=true;
        plus.runtime.getProperty(plus.runtime.appid,function(inf){
          that.version=inf.version;
        });
      });
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005
      });
    },
    computed:{
      getUserType(){
        var that = this;
        var userType='游客';
        if(that.userInfo && that.userInfo.user_level_id){
          switch (that.userInfo.user_level_id){
            case 1:
            case '1':
              userType='消费者';
              break;
            case 2:
            case '2':
              userType='笑笑商家';
              break;
            case 3:
            case '3':
              userType='笑笑宝';
              break;
            default:
              userType='游客';
          }
        }
        return userType;
      },
      getAvatar(){
        var that = this;
        var avatar= that.userInfo.avatar?that.userInfo.avatar:(that.userInfo.gender==0?that.avatarWoman:that.avatarMan);
        return avatar;
      }
    },
    methods:{
      exit(){
        var that = this;
        mui.confirm("确认退出当前账户",'',['取消','确认'],function(e){
          if(e.index==1){
            mui.plusReady(function() {
              plus.storage.removeItem('token');
            });
            that.$cookie.delete('token');
            that.$store.commit('user/updateToken','');
            that.$store.commit('user/updateUserInfo','');
            that.$router.go(-1);
          }
        });
      },
      getVersion(){
        var that =  this;
        that.$http({url: that.$http.adornUrl(that.$api.AppVersion),method:'get',params:that.$http.adornParams()})
          .then(function(res){
            if(res.errno==0){
              if(!res.data.APP_VERSION){
                mui.toast("请联系客服！");
                return;
              }
              if(res.data.APP_VERSION==that.version){
                mui.toast("当前已是最新版本");
              }else{
                mui.confirm("版本较低请升级",'',['取消','确认'],function(e){
                  if(e.index==1){
                    that.downloadApp(res.data.APP_DOWNLOAD);
                  }
                });
              }
            }
          })
          .catch(function (err) {
            console.log("错误提示:",err);
          })
      },
      downloadApp(url){
        var that = this;
        if(url){
          var dtask = plus.downloader.createDownload(url,{},function(d,status){
            if(status==200){ // 下载成功
              var path = d.filename;
              plus.runtime.install(path);
            } else {//下载失败
              mui.toast("请稍后重试！")
            }
          });
          dtask.start();
        }else{
          mui.toast("请联系客服!")
        }
      },
    },
    filters: {
      trVersion: function (value) {
        if (!value) return '';
        return "当前版本"+value;
      }
    }
  }
</script>

<style scoped lang="less">
  .setup{
    background: #f4f4f4;
    height: auto;
    overflow: hidden;
    width: 100%;
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .exit{
      background:linear-gradient(to right, #567eff, #1127ff);
      -webkit-box-shadow: 0 0 1px #ccc;
      box-shadow: 0 0 1px #ccc;
      .mui-tab-item{
        color: #fff;
      }
    }
    .mui-content{
      padding-bottom: 52px;
      .user-info-list {
        margin-top: 0;
        .info-list-item {
          display: flex;
          justify-content: space-between;
          font-size: 0.3rem;
          .img-text {
            line-height: 42px;
          }
          .item-right {
            color: #8e8e92;
            margin-right: 0.6rem;
            z-index: 100;
          }
        }
      }
      .not-first-list{
        margin-top: 15px;
      }
    }
  }
</style>
